/* reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


html,body
{
	width:100%;
	height:100%;
}

body
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	color:#fff;
	background:#000 url(img/darkNoise.png);
	font-family:Tahoma,Arial,sans-serif;
	font-size:13px;
}

small
{
	font-size:80%;
}

a,a:visited
{
	text-decoration:underline;
	cursor:pointer;
	color:#ccc;
}
a:hover
{
	text-shadow:0px 0px 3px #fff;
	color:#fff;
}
a:active
{
	opacity:0.8;
	background:transparent;
}

.inset
{
	/*box-shadow:0px 0px 12px #000 inset;*/
}

.titleFont
{
	font-family: 'Kavoon', Georgia,serif;
}
.title,.section,.lockedTitle
{
	font-family: 'Kavoon', Georgia,serif;
	font-size:28px;
	text-shadow:0px 0px 4px #000;
	color:#fff;
}
.section
{
	padding:16px;
	width:100%;
	text-align:center;
}
.subsection
{
	padding:8px 0px;
	font-size:14px;
}
.subsection div.title
{
	font-size:22px;
	padding:8px 16px;
	width:100%;
	border-bottom:1px solid #999;
	margin-bottom:8px;
}
.update .title
{
	color:#69c;
}
.update.small .title
{
	font-size:16px;
	opacity:0.8;
	color:#fff;
}
.listing
{
	padding:3px 16px;
	font-size:13px;
}
.listing b
{
	font-weight:bold;
	opacity:0.6;
}
.listing small
{
	font-size:11px;
	opacity:0.9;
}
.listing label
{
	font-size:12px;
	border-bottom:1px solid #fff;
	opacity:0.5;
	padding-left:16px;
	padding-bottom:2px;
	position:relative;
	left:-4px;
	top:-2px;
}
.hidden
{
	visibility:hidden;
}
.toggledOff
{
	opacity:0;
	display:none;
}
.listing:hover .hidden
{
	visibility:visible;
}

.optionBox
{
	text-align:center;
}
.optionBox .option
{
}
a.option.big
{
	font-size:30px;
	margin:auto;
	padding:8px 16px;
	width:80%;
}
a.option, .info a
{
	display:inline-block;
	border:1px solid #ccc;
	background:#000;
	margin:2px 4px 2px 0px;
	color:#ccc;
	font-size:12px;
	padding:4px 8px;
	text-decoration:none;
}
a.option:hover, .info a:hover
{
	border-color:#fff;
	color:#fff;
	text-shadow:none;
}
a.option:active, .info a:active
{
	background-color:#333;
}
a.option.warning:hover
{
	border-color:#f33;
	color:#f33;
}
a.option.warning:active
{
	background-color:#300;
}
.info a
{
	border-color:#666;
	background:#eee;
	color:#666;
	padding:2px 6px;
}
.info a:hover
{
	border-color:#000;
	background-color:#fff;
	color:#000;
}
.info a:active
{
	background-color:#999;
}

.warning, a.option.warning
{
	color:#c00;
	border-color:#c00;
}

#backgroundLayers, #backgroundLayers div
{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
}
/*
#backgroundLayer1
{
	background:url(img/bgBlue.jpg);
}
#backgroundLayer2
{
	background:#000 url(img/darkNoise.png);
}
*/
#backgroundCanvas,#backgroundLeftCanvas
{
	position:absolute;
	left:0px;
	top:0px;
}

#topBar
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:32px;
	background:url(img/darkNoise.png);
	box-shadow:0px -4px 8px #666 inset;
	color:#ccc;
}
#topBar div
{
	margin:6px 8px;
}
#topBar a
{color:#fff;}

#javascriptError
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	background:url(img/darkNoise.png);
	text-align:center;
	z-index:100000000000;
	line-height:150%;
	font-size:20px;
}
#game
{
	position:absolute;
	left:0px;
	top:32px;
	right:0px;
	bottom:0px;
	overflow:hidden;
}
#sectionLeft
{
	position:absolute;
	left:0px;
	top:0px;
	width:30%;
	bottom:0px;
	min-width:100px;
	overflow:hidden;
}
#sectionMiddle
{
	position:absolute;
	left:30%;
	padding-left:16px;
	margin-right:15px;
	top:0px;
	right:318px;
	bottom:0px;
	min-width:100px;
	overflow-x:hidden;
	overflow-y:scroll;
}
#game.onMenu #sectionMiddle
{
	background:#000 url(img/darkNoise.png);
}
#sectionRight
{
	height:100%;
	position:absolute;
	top:0px;
	right:0px;
	overflow-x:hidden;
	overflow-y:scroll;
}

#sectionLeft .blackGradient
{
	background:url(img/blackGradient.png) repeat-x bottom;
	position:absolute;
	left:0px;
	right:0px;
	top:300px;
	height:640px;
}
#sectionLeft .blackFiller
{
	background:#000;
	position:absolute;
	left:0px;
	right:0px;
	top:940px;
	bottom:0px;
}

.framed
{
	background:#000 url(img/darkNoise.png);
	padding:4px 8px;
	margin:4px;
	border:3px ridge #d2e248;
	border-color:#c7cd6e #a48836 #845a36 #a48836;
	border-radius:3px;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 0px 6px 1px rgba(0,0,0,0.5) inset;
	text-shadow:0px 1px 1px #000;
	color:#ccc;
	-webkit-transition: opacity 0.1s ease-out;
	-moz-transition: opacity 0.1s ease-out;
	-ms-transition: opacity 0.1s ease-out;
	-o-transition: opacity 0.1s ease-out;
	transition: opacity 0.1s ease-out;
}
.framed b
{
	color:#fff;
	font-weight:bold;
}
.framed .name
{
	font-weight:bold;
	font-size:110%;
	color:#fff;
	margin:2px 0px;
}
.framed q
{
	display:block;
	position:relative;
	text-align:right;
	margin-top:8px;
	font-style:italic;
	opacity:0.7;
	font-size:11px;
}
.framed .close
{
	position:absolute;
	top:-5px;
	right:0px;
	padding:4px;
	font-weight:bold;
	font-size:16px;
	text-shadow:0px 0px 2px #000,0px 0px 1px #000;
	cursor:pointer;
	font-family:Comic Sans MS;
}
.framed .close:hover
{
	color:#fff;
	text-shadow:0px 0px 2px #fff;
}
.framed .block
{
	padding:8px;
	margin:2px;
	border-radius:4px;
	border:1px solid rgba(255,255,255,0.25);
	box-shadow:0px 0px 1px #000,0px 0px 1px #000 inset;
}

#tooltipAnchor
{
	position:absolute;
	z-index:1000000000;
	display:none;
}
#tooltip
{
	position:absolute;
}
#tooltip .data
{
	border-top:1px solid rgba(255,255,255,0.25);
	margin-top:8px;
	padding:4px 0px;
	font-size:80%;
}

.description
{
	margin:4px 0px;
}

q:before
{
	display:inline-block;
	content:"\"";
}
q:after
{
	display:inline-block;
	content:"\"";
}


.price
{
	font-weight:bold;
	color:#6f6;
	padding-left:18px;
	position:relative;
}
.price .tinyCookie
{
	display:block;
	position:absolute;
	left:0px;
	top:2px;
	width:16px;
	height:16px;
	cursor:pointer;
}
.price.disabled, .disabled .price
{
	color:#f66;
}
.price:before
{
	content:'';
	display:block;
	position:absolute;
	left:0px;
	top:2px;
	background:url(img/money.png);
	width:16px;
	height:16px;
}
.price.plain
{
	color:#fff;
	display:inline-block;
}
.price.plain:before
{
	top:0px;
}

#cookieAnchor
{
	position:absolute;
	left:50%;
	top:40%;
}
#bigCookie
{
	width:256px;
	height:256px;
	position:absolute;
	left:-128px;
	top:-128px;
	/*background:url(img/perfectCookie.png);
	background-size:256px 256px;*/
	background:url(img/empty.png);/* somehow necessary; an empty div with no background seems to be click-through */
	cursor:pointer;
	z-index:10000;
}
.elderWrath #bigCookie
{
	background:url(img/imperfectCookie.png);
	background-size:256px 256px;
}
#cookieNumbers{position:absolute;top:-80px;}
.cookieNumber
{
	position:absolute;
	pointer-events:none;
	left:-100px;
	top:0px;
	width:200px;
	z-index:100;
	text-align:center;
	text-shadow:none;
}
#cookieCursors{position:absolute;z-index:5;}
.cursor
{
	width:32px;
	height:32px;
	position:absolute;
	background:url(img/cursor.png);
}
.cookieParticle
{
	width:64px;
	height:64px;
	margin-left:-32px;
	margin-top:-32px;
	position:absolute;
	background:url(img/smallCookies.png);
	opacity:0;
}
#particles {position:absolute;left:0px;top:0px;}
.particle
{
	position:absolute;
	pointer-events:none;
	left:-200px;
	bottom:0px;
	width:400px;
	z-index:100000000;
	text-align:center;
	text-shadow:0px 0px 6px #000;
	font-size:24px;
}
#cookieShower
{
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
}
#milk
{
	width:100%;
	height:0%;
	position:absolute;
	left:0px;
	bottom:0px;
	z-index:100;
	opacity:0.9;
}
.milkLayer
{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	background-repeat:repeat-x;
}
#cookies
{
	position:absolute;
	left:0px;
	top:10%;
	width:100%;
	text-align:center;
	z-index:200;
	background:#000;
	background:rgba(0,0,0,0.4);
	padding:2px 0px;
}
#bakeryNameAnchor
{
	position:absolute;
	left:0px;
	top:10%;
	width:100%;
	z-index:200;
}
#bakeryName
{
	position:absolute;
	left:0px;
	bottom:8px;
	left:12.5%;
	width:75%;
	text-align:center;
	font-size:20px;
	background:#000;
	background:rgba(0,0,0,0.4);
	border-radius:12px;
}
#bakeryName input
{
	background:transparent;
	border:none;
	font-family:inherit;
	font-size:inherit;
	color:inherit;
	text-shadow:inherit;
	min-width:32px;
	text-align:right;
}
#bakeryName input:focus, #bakeryName input:hover
{
	background:#000;
	border-radius:6px;
}


.separatorLeft, .separatorRight
{
	width:16px;
	height:100%;
	background:url(img/panelVertical.png) repeat-y;
	position:absolute;
	top:0px;
	bottom:0px;
	z-index:100;
}
.separatorLeft
{
	left:30%;
}
.separatorRight
{
	right:317px;
}
.separatorBottom
{
	width:100%;
	height:16px;
	background:url(img/panelHorizontal.png) repeat-x;
	position:absolute;
	left:0px;
	bottom:0px;
}

.button
{
	background:#000 url(img/darkNoise.png);
	box-shadow:0px 0px 3px #666 inset,0px 0px 4px #000;
	position:absolute;
	z-index:100;
	width:64px;
	height:24px;
	text-align:center;
	font-size:18px;
	cursor:pointer;
	
	-webkit-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
	-moz-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
	-ms-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
	-o-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
	transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
}
.button:hover
{
	box-shadow:0px 0px 12px #ccc inset,0px 0px 4px #000;
	z-index:1000;
}
#prefsButton:hover,#statsButton:hover{left:-8px;}
#prefsButton,#statsButton{padding:14px 0px 10px 16px;}
#prefsButton{top:0px;left:-16px;}
#statsButton{bottom:16px;left:-16px;}
#logButton:hover{right:-8px;}
#logButton{padding:14px 16px 10px 0px;}
#logButton{bottom:16px;right:-16px;}

#game.onMenu #menu{display:block;}
#game.onMenu .row{display:none;}
#menu
{
	display:none;
	z-index:1000000;
	position:absolute;
	left:16px;
	right:0px;
	top:112px;
	bottom:0px;
	/*box-shadow:0px 0px 24px #000 inset;
	background:#000 url(img/darkNoise.png);*/
}

#comments
{
	padding:16px;
	text-align:center;
	position:relative;
	padding-bottom:32px;
	font-size:16px;
	height:64px;
	overflow:hidden;
}
#commentsText
{
	padding:0px 64px;
}
.commentsText q
{
	font-style:italic;
}
.commentsText sig
{
	font-size:70%;
	display:block;
	text-align:center;
	opacity:0.7;
}
.commentsText sig:before
{
	content:"-";
	padding-left:64px;
}

.row
{
	height:128px;
	/*height:256px;/*testing*/
	position:relative;
	padding-bottom:32px;
	display:none;
	overflow:hidden;
}
.row.enabled{display:block;}
.row .rowCanvas
{
	width:100%;
	height:128px;
	position:absolute;
	top:128px;
	/*overflow-x:scroll;
	overflow-y:hidden;*/
	margin-top:16px;
	background:#000;
	display:none;/*testing*/
}
.row .content
{
	width:100%;
	height:128px;
	position:absolute;
	overflow-x:scroll;
	overflow-y:hidden;
	padding-bottom:16px;
}
.row .background
{
	background:#999;
	position:absolute;
	left:0px;
	top:0px;
	height:100%;
	z-index:1;
	min-width:100%;
}
.row .backgroundLeft,.row .backgroundRight
{
	width:128px;
	height:128px;
	position:absolute;
	top:0px;
}
.row .backgroundLeft
{
	left:0px;
}
.row .backgroundRight
{
	right:0px;
}
.row .objects
{
	position:absolute;
	z-index:10;
}
.row .special
{
	position:absolute;
	z-index:1000000;
	width:100%;
	top:0px;
	bottom:16px;
	background:#000 url(img/mapBG.jpg) fixed;
	display:none;
}
.row .specialButton
{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:128px;
	height:128px;
	z-index:200000;
}
.row .specialButtonPic
{
	display:block;
	width:100%;
	height:100%;
	background:transparent 0px 8px no-repeat;
}
.row .specialButtonText
{
	display:block;
	position:absolute;
	left:0px;
	bottom:16px;
	width:100%;
	text-align:center;
	text-shadow:0px 0px 4px #000;
	font-weight:bold;
	font-size:10px;
}
a.control
{
	position:absolute;
	width:48px;
	height:48px;
	background:url(img/control.png) no-repeat;
	opacity:0.8;
}
a.control:hover{opacity:1;}
a.control.west{left:0px;top:48px;background-position:0px -48px;}
a.control.east{left:96px;top:48px;background-position:-96px -48px;}
a.control.north{left:48px;top:0px;background-position:-48px 0px;}
a.control.south{left:48px;top:96px;background-position:-48px -96px;}
a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
.map
{
	position:absolute;
	left:0px;
	top:0px;
	overflow:hidden;
	background:#00061b;
}
.map:after{content:'';pointer-events:none;display:block;position:absolute;left:0px;top:0px;width:144px;height:144px;z-index:100000;background:url(img/dungeonOverlay.png);}
.map .tile, .map .thing
{
	width:16px;
	height:16px;
	position:absolute;
	left:0px;
	top:0px;
}
.mapContainer
{
	/* meh. */
	/*
	-webkit-transition: top 0.1s ease-out, left 0.1s ease-out;
	-moz-transition: top 0.1s ease-out, left 0.1s ease-out;
	-ms-transition: top 0.1s ease-out, left 0.1s ease-out;
	-o-transition: top 0.1s ease-out, left 0.1s ease-out;
	transition: top 0.1s ease-out, left 0.1s ease-out;
	*/
}
.map .tile {background:url(img/dungeonTiles.png) no-repeat;z-index:100;}
.map .thing {background:url(img/dungeonIcons.png) no-repeat;z-index:200;}

.dungeonName
{
	position:absolute;
	top:24px;
	left:-32px;
	width:256px;
	opacity:0.6;
}
.dungeonLog
{
	position:absolute;
	right:0px;
	top:0px;
	width:200px;
	height:100%;
	overflow-y:scroll;
	z-index:100;
}
.dungeonLog div
{
	font-size:10px;
	padding:3px 2px;
	opacity:0.6;
	text-shadow:0px 1px 0px #000;
}
.dungeonLog div.new
{
	opacity:1;
}
.dungeonLog div b{font-weight:bold;}

.mobSlot
{
	width:96px;
	height:100%;
	position:absolute;
	left:0px;
	bottom:0px;
}
.mobPic
{
	width:96px;
	height:96px;
	background:transparent center bottom no-repeat;
	position:absolute;
	left:0px;
	bottom:32px;
}
.mobName
{
	position:absolute;
	width:200%;
	left:-50%;
	bottom:16px;
	text-align:center;
	font-size:12px;
}
.hpBar
{
	position:absolute;
	width:100%;
	left:0px;
	top:0px;
	height:100%;
	background:url(img/hpBar.png) repeat-x;
	-webkit-transition: width 0.1s ease-out;
	-moz-transition: width 0.1s ease-out;
	-ms-transition: width 0.1s ease-out;
	-o-transition: width 0.1s ease-out;
	transition: width 0.1s ease-out;
}
.hpmBar
{
	position:absolute;
	width:70%;
	left:15%;
	bottom:4px;
	height:8px;
	background:url(img/hpmBar.png) repeat-x;
	box-shadow:0px 0px 4px #000;
}

.map .thing .mapInfo{display:none;position:absolute;left:0px;top:0px;z-index:1000000;background:#000;padding:4px 8px;}
.map .thing:hover .mapInfo{display:block;}
.special .fighter {position:absolute;width:96px;height:96px;}
.row .info, #sectionLeft .info, .row .specialButton
{
	/*visibility:hidden;*/
	-webkit-transition: opacity 0.1s ease-out;
	-moz-transition: opacity 0.1s ease-out;
	-ms-transition: opacity 0.1s ease-out;
	-o-transition: opacity 0.1s ease-out;
	transition: opacity 0.1s ease-out;
	opacity:0;
}
.row .info, #sectionLeft .info
{
	position:absolute;
	top:0px;
	left:0px;
	height:112px;
	padding:8px;
	font-size:12px;
	line-height:125%;
	background:url(img/infoBG.png);
	color:#666;
	z-index:100000;
}
.row .info:after
{
	width:16px;
	height:128px;
	position:absolute;
	right:-16px;
	top:0px;
	background:url(img/infoBGfade.png) repeat-y;
	display:block;
	content:'';
}
#sectionLeft .info
{
	border-radius:16px;
	padding:24px 8px 8px 24px;
	left:-16px;
	top:-16px;
	height:auto;
}
.row:hover .info, #sectionLeft:hover .info, .row:hover .specialButton
{
	opacity:1;
}
.row .object
{
	position:absolute;
	width:64px;
	height:64px;
}
#sectionLeftInfo
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}

.zoneTitle
{
	text-align:center;
	padding:8px;
	width:100%;
}
#storeTitle
{
	width:284px;
}
#buildingsTitle
{
	display:none;
}
#upgrades
{
	height:60px;
	width:300px;
	position:relative;
	overflow-y:hidden;
}
#upgrades:hover
{
	height:auto;
	min-height:60px;
}
.crate
{
	width:60px;
	height:60px;
	display:inline-block;
	cursor:pointer;
	opacity:0.6;
	position:relative;
	background:#000;
	float:left;
}
.crate:before
{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:60px;
	height:60px;
	display:block;
	background:url(img/upgradeFrame.png);
	z-index:10;
}
.icon
{
	width:48px;
	height:48px;
	display:inline-block;
	margin:0px 4px;
}
.icon,.crate
{
	background-image:url(img/icons.png?v=10);
}
.achievement
{
	opacity:0.4;
}
.crate.enabled
{
	opacity:1;
}
.crate:hover:before
{
	box-shadow:0px 0px 6px #fff inset,0px 0px 1px #000;
	z-index:20;
}
.crate:hover
{
	background-color:#200e0a;
}
.product
{
	width:300px;
	height:64px;
	cursor:pointer;
	opacity:0.6;
	background:url(img/storeTile.jpg);
	position:relative;
	-webkit-transition: opacity 2s ease-out, margin-bottom 0.2s ease-out;
	-moz-transition: opacity 2s ease-out, margin-bottom 0.2s ease-out;
	-ms-transition: opacity 2s ease-out, margin-bottom 0.2s ease-out;
	-o-transition: opacity 2s ease-out, margin-bottom 0.2s ease-out;
	transition: opacity 2s ease-out, margin-bottom 0.2s ease-out;
}
.product:nth-child(4n-3) {background-position:0px 64px;}
.product:nth-child(4n-2) {background-position:0px 128px;}
.product:nth-child(4n-1) {background-position:0px 192px;}
.product:hover
{
	box-shadow:0px 0px 16px #fff inset,0px 0px 1px #000;
	z-index:20;
}
.product.enabled:active
{
	box-shadow:0px 0px 16px #000 inset;
}
.product.unlocked.enabled
{
	opacity:1;
}
.product.toggledOff
{
	opacity:0;
}
.product .icon
{
	width:64px;
	height:64px;
	position:absolute;
	left:0px;
	top:0px;
	background-repeat:no-repeat;
	margin:0px;
}
.product .content
{
	display:inline-block;
	position:absolute;
	left:64px;
	top:6px;
	right:0px;
	bottom:6px;
	padding:4px;
	text-shadow:0px 0px 6px #000,0px 1px 1px #000;
}
.product .content .owned
{
	position:absolute;
	right:12px;
	top:6px;
	font-size:40px;
	opacity:0.2;
	color:#000;
	text-shadow:0px 0px 8px #fff;
}
.product .icon
{
	opacity:0;
}
.product.unlocked .icon
{
	opacity:1;
}
.product .icon.off
{
	z-index:100;
	opacity:1;
	-webkit-transition: opacity 2s ease-out;
	-moz-transition: opacity 2s ease-out;
	-ms-transition: opacity 2s ease-out;
	-o-transition: opacity 2s ease-out;
	transition: opacity 2s ease-out;
}
.product.unlocked .icon.off
{
	opacity:0;
}
.product.locked .title {display:none;}
.product .lockedTitle {display:none;}
.product.locked .lockedTitle {display:block;}
/*
.product.unlocked:hover{margin-bottom:24px;}
.product.unlocked .buySell{display:block;}
.product.unlocked:hover .buySell{opacity:1;height:24px;}
*/
.buySell
{
	position:absolute;
	bottom:-24px;
	height:0px;
	left:0px;
	width:300px;
	background:#999;
	display:none;
	opacity:0;
	overflow-x:hidden;
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-ms-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
	background:url(img/darkNoise.png);
	box-shadow:0px 0px 4px #000 inset;
	z-index:1000;
}
.buySell>div
{
	float:left;
	width:100px;
	padding:4px 0px;
	text-align:center;
	font-variant:small-caps;
	color:#fff;
	font-weight:bold;
	font-size:14px;
	opacity:0.5;
}
.buySell>div:hover
{
	opacity:1;
	text-shadow:0px 0px 4px #fff;
}
.buySell>div:active
{
	text-shadow:none;
}

.goldenCookie
{
	width:96px;
	height:96px;
	background:url(img/goldCookie.png);
	cursor:pointer;
	position:absolute;
	z-index:10000000000;
	display:none;
}

.seasonPopup
{
	width:256px;
	height:256px;
	background:url(img/goldCookie.png) center center no-repeat;
	cursor:pointer;
	position:absolute;
	z-index:10000000000;
	display:none;
}

#darken
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	background:rgba(0,0,0,0.5);
	z-index:100000000;
	display:none;
}

#promptAnchor
{
	position:absolute;
	left:50%;
	margin-left:-125px;
	top:125px;
	z-index:1000000000;
	display:none;
}
#prompt
{
	position:relative;
	overflow-y:hidden;
	width:250px;
	padding:16px;
	left:-28px;
}
#prompt h3
{
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:14px;
	position:relative;
	top:-8px;
}


#notes
{
	position:absolute;
	/*left:0px;
	bottom:128px;*/
	left:50%;
	margin-left:-125px;
	bottom:0px;
	z-index:100000000;
}
#notes .remaining {padding:3px;opacity:0.75;text-shadow:0px 0px 2px #000,0px 1px 0px #000;}
.note
{
	position:relative;
	overflow-y:hidden;
	width:250px;
	padding-right:16px;
	left:-28px;
}
.note .icon
{
	float:left;
	margin-left:-4px;
}
.note h3
{
	font-weight:bold;
	font-size:14px;
	overflow-y:hidden;
}
.note h5
{
	opacity:0.6;
	font-size:12px;
}
.note.haspic h3
{
	margin-top:4px;
}
.note.hasdesc h3
{
	border-bottom:1px solid rgba(255,255,255,0.5);
	padding-bottom:2px;
}


#timers
{
	width:100%;
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	z-index:100000000;
	pointer-events:none;
}
#timers>div
{
	background:#000;
	width:100%;
	height:8px;
	background:url(img/timerBars.png) 0px 0px;
	box-shadow:-30px 0px 15px -15px #fff inset;
}
#timers>div#timer-frenzy{background-position:0px 0px;}
#timers>div#timer-elderFrenzy{background-position:48px -8px;}
#timers>div#timer-clot{background-position:16px -16px;}
#timers>div#timer-clickFrenzy{background-position:64px -24px;}

#versionNumber
{
	position:absolute;
	left:0px;
	bottom:0px;
	opacity:0.5;
	margin:8px;
	font-size:22px;
	z-index:100000000;
}

#alert
{
	display:none;
	position:fixed;
	bottom:-16px;
	left:-16px;
	z-index:100000000000;
	padding:12px 12px 24px 24px;
	font-size:14px;
	background:#990;
	border-radius:16px;
	color:#fff;
	box-shadow:0px 0px 4px #000, 0px 0px 4px #000 inset;
	text-shadow:0px 0px 2px #000;
	border:4px solid #fff;
}
#alert b {font-weight:bold;}
#alert small {font-size:80%;}

#support
{
	width:300px;
	text-align:center;
	margin:16px auto;
}
#supportComment
{
	opacity:0.75;
	text-shadow:0px 0px 2px #000,0px 1px 0px #000;
	margin:8px;
}
#supportPlaceholder {width:300px;height:250px;position:absolute;left:0px;top:0px;z-index:10;opacity:0.6;}
#supportPlaceholder>div {margin:20px auto;width:60%;text-align:center;background:#000;color:#fff;font-weight:bold;font-size:80%;border-radius:8px;padding:8px 4px;}
#donateBox
{
	z-index:10000000;
	position:absolute;
	right:0px;
	top:240px;
	text-align:center;
	width:120px;
	display:none;
}
#donateBox.on {display:block;}

.noFancy *
{
	text-shadow:none!important;
	box-shadow:none!important;
}
.noFancy .price
{
	text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}

/* mobile layout */
.mobile #sectionLeft,.mobile #sectionMiddle,.mobile #sectionRight
{
	width:100%;
	position:absolute;
	left:0px;
	top:128px;
	right:0px;
	bottom:64px;
	display:none;
}
.mobile .separatorLeft,.mobile .separatorRight
{display:none;}

.mobile .focusLeft #sectionLeft{display:block;}
.mobile .focusMiddle #sectionMiddle{display:block;}
.mobile .focusRight #sectionRight{display:block;}
.mobile .focusMenu #sectionMiddle{display:block;}
.mobile #sectionMiddle
{
	margin:0px;
	padding:0px;
}
.mobile #storeTitle,.mobile #upgrades
{
	width:100%;
}
.mobile .product
{
	width:100%;
	background-size:100% 400%;
}

.mobile #game{top:0px;}
.mobile #topBar,.mobile #versionNumber{display:none;}

#focusButtons
{
	display:none;
	position:fixed;
	left:0px;
	bottom:0px;
	height:64px;
	width:100%;
	background:url(img/darkNoise.png);
	z-index:1000000;
	font-size:32px;
}
#focusButtons:before
{
	content:'';
	display:block;
	position:absolute;
	left:0px;
	top:-16px;
	background:url(img/blackGradient.png) repeat-x bottom;
	background-size:100% 100%;
	width:100%;
	height:16px;
	opacity:0.5;
	pointer-events:none;
}
#focusButtons div
{
	width:25%;
	height:50%;
	cursor:pointer;
	float:left;
	background:url(img/buttonTile.jpg);
	background-size:100% 400%;
	padding:16px 0px;
	text-align:center;
	opacity:0.5;
}
#focusButtons div:nth-child(4n-3) {background-position:0px 100%;}
#focusButtons div:nth-child(4n-2) {background-position:0px 200%;}
#focusButtons div:nth-child(4n-1) {background-position:0px 300%;}
#focusButtons div:hover
{
	box-shadow:0px 0px 16px #fff inset,0px 0px 1px #000;
	z-index:20;
}
#focusButtons div:active
{
	box-shadow:0px 0px 16px #000 inset;
}
.focusLeft #focusButtons #focusLeft,.focusMiddle #focusButtons #focusMiddle,.focusRight #focusButtons #focusRight,.focusMenu #focusButtons #focusMenu
{
	opacity:1;
	z-index:20;
	box-shadow:0px 0px 8px #fff;
}

#compactOverlay
{
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	height:128px;
	width:100%;
	background:url(img/darkNoise.png);
	z-index:1000000;
	text-align:center;
	font-size:16px;
}
#compactCommentsText
{
	padding:8px 0px;
	opacity:0.8;
	position:absolute;
	width:100%;
	text-align:center;
	bottom:16px;
	left:0px;
}
#compactCookies
{
	padding:8px 0px;
	position:absolute;
	width:100%;
	height:32px;
	top:0px;
	left:0px;
	font-size:24px;
	text-shadow:0px 0px 12px rgba(255,255,255,0.5);
	background:rgba(255,255,255,0.05);
}

.mobile .row {padding-bottom:16px;}

.mobile #comments, .mobile #cookies {display:none;}
.mobile #focusButtons, .mobile #compactOverlay/*, .mobile #buildingsTitle*/
{display:block;}

/**{overflow:hidden!important;}*/